import { CustomTable, ProTableValue } from '@/components/ProTable/interface';
import { requestTypeOptions, selectOptions } from '../../../form/component/right/basic/options';
import { CustomForm } from '@/components/ProForm/interface';

export function useConfigForm(dataGrid: CustomTable) {
  let configForm = reactive<CustomForm>({
    form: {},
    title: '',
    visible: false,
    transitionArr: [],
    options: [
      {
        type: 'input',
        label: '表格名称',
        prop: 'tableName',
        hide: false,
        rules: [
          {
            required: true,
            message: '表格名称',
            trigger: 'blur'
          }
        ]
      },
      {
        type: 'select',
        label: '表格类型',
        prop: 'type',
        hide: false,
        defaultValue: 'main-table',
        changeMethod: form => {
          let dialogField = [];
          for (let item of configForm.options) {
            if (item.prop.includes('dialogAttrs-')) {
              dialogField.push(item.prop);
            }
          }
          const flag = form.type === 'detail';
          formChangeItemStatus(configForm, ['detailLabel'], !flag, 'hide');

          formChangeItemStatus(configForm, dialogField, form.type !== 'dialog', 'hide');
          form.detailLabel = '';
          switch (form.type) {
            case 'detail':
              form.ref = 'detailRef';
              break;
            case 'main-table':
              form.ref = 'tableRef';
              break;
            case 'dialog':
              form.ref = 'dialogRef';
              break;
          }
        },
        children: [
          {
            label: '主表格',
            value: 'main-table',
            type: 'option'
          },
          {
            label: '明细表格',
            value: 'detail',
            type: 'option'
          },
          {
            label: '对话框',
            value: 'dialog',
            type: 'option'
          }
        ],
        rules: [
          {
            required: true,
            message: '',
            trigger: 'blur'
          }
        ]
      },
      {
        type: 'input',
        label: '组件ref',
        prop: 'ref',
        hide: false,
        defaultValue: 'tableRef',
        rules: [
          {
            required: true,
            message: '',
            trigger: 'blur'
          }
        ]
      },

      {
        type: 'input',
        label: '明细标签',
        prop: 'detailLabel',
        hide: true
      },
      {
        type: 'input',
        label: '对话框-标题',
        prop: 'dialogAttrs-title',
        defaultValue: '',
        hide: true
      },
      {
        type: 'input',
        label: '对话框-宽度',
        prop: 'dialogAttrs-width',
        defaultValue: '80vw',
        hide: true
      },
      {
        type: 'input',
        label: '对话框-高度',
        prop: 'dialogAttrs-height',
        defaultValue: '40vw',
        hide: true
      },
      {
        type: 'select',
        label: '树结构自动展开',
        prop: 'attrs-defaultExpandAll',
        hide: false,
        defaultValue: false,
        children: selectOptions
      },

      {
        type: 'select',
        label: '接口-自动请求',
        prop: 'requestAuto',
        hide: false,
        defaultValue: true,
        children: selectOptions
      },
      {
        type: 'select',
        label: '接口-是否分页',
        prop: 'pagination',
        hide: false,
        defaultValue: true,
        children: selectOptions
      },

      {
        type: 'select',
        label: '接口-类型',
        prop: 'requestApiProps.type',
        hide: false,
        defaultValue: 'post',
        children: requestTypeOptions
      },
      {
        type: 'input',
        label: '接口-地址',
        prop: 'requestApiProps.url',
        hide: false
      },
      {
        type: 'input',
        label: '初始化参数',
        prop: 'initParam',
        hide: false,
        attrs: {
          type: 'textarea',
          autosize: {
            minRows: 6,
            maxRows: 10
          }
        }
      },
      {
        type: 'input',
        label: '接口-验证字段',
        prop: 'requestApiProps.validationField',
        hide: false,
        attrs: {
          type: 'textarea',
          autosize: {
            minRows: 6,
            maxRows: 10
          }
        }
      },
      {
        type: 'input',
        label: '接口-参数',
        prop: 'requestApiProps.data',
        hide: false,
        attrs: {
          type: 'textarea',
          autosize: {
            minRows: 6,
            maxRows: 10
          }
        }
      },
      {
        type: 'input',
        label: '接口-回调',
        prop: 'dataCallback',
        hide: false,
        attrs: {
          type: 'textarea',
          autosize: {
            minRows: 6,
            maxRows: 10
          }
        }
      },
      {
        type: 'input',
        label: '引入组件集合',
        prop: 'components',
        hide: false,
        attrs: {
          type: 'textarea',
          autosize: {
            minRows: 6,
            maxRows: 10
          }
        }
      }
    ]
  });

  const saveConfigForm = async form => {
    Object.assign(dataGrid, {
      requestAuto: form.requestAuto,
      pagination: form.pagination
    });
    setTimeout(() => {
      elMessage();
      useGlobalStore().setGlobalState('formLoading', false);
      configForm.visible = false;
    }, 0);
  };

  return { configForm, saveConfigForm };
}
